<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影档期查询</title>
    <link href="../../../css/dashboard.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ececf6;
        }
        header {
            background-color: #ffdf7e; /* 蓝色 */
            color: #171a1d;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #7abaff;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 10px;
        }
        section {
            padding: 20px;
            text-align: center;
        }
        footer {
            background-color: #818182;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .movie-poster {
            width: 200px;
            height: auto;
            margin-bottom: 20px;
        }
        .login-button {
            position: absolute;
            top: 70px;
            right: 20px;
            background-color: #cfe2ff;
            color: #23292e;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
</head>
    <!--背景图片模糊-->
<!--    <link rel="stylesheet" type="text/css" href="../../../css/wzq-background-picture.css">-->
    <!--引入轮播图的css-->
<!--    <link rel="stylesheet" type="text/css" href="../../../css/wzq-table.css">-->

<!--    <style>-->
<!--        .search-container {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            width: 300px;-->
<!--            margin: 0 auto;-->
<!--        }-->

<!--        .search-input {-->
<!--            flex: 1;-->
<!--            padding: 8px;-->
<!--            border: 1px solid #ccc;-->
<!--            border-radius: 5px;-->
<!--        }-->

<!--        .search-button {-->
<!--            padding: 8px 16px;-->
<!--            background-color: #007bff;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            border-radius: 5px;-->
<!--            cursor: pointer;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<header>
    <h1>Welcome to 丽江新中数影城</h1>
</header>

<!--<h1>电影搜索</h1>-->
<!--<form action="/movie_fd" method="GET">-->
<!--    <label for="movieName">电影名称:</label>-->
<!--    <input type="text" id="movieName" name="movieName" class="search-input" placeholder="请输入搜索内容">-->
<!--    <input type="submit" value="搜索">-->
<!--</form>-->

<h1>电影查询</h1>
<form action="#" th:action="@{/ilist}" method="get">
    <label>影片名称:<input type="text" name="name" th:value="${finfor}"/>&nbsp;
        影片类型:<input type="text" name="type" th:value="${score}"/>&nbsp
    上映日期:<input type="text" name="uptime" th:value="${uptime}"/>&nbsp;</label>
    <button type="submit" class="btn btn-success btn-sm" value="搜索" id="search">搜索</button>
</form>
<script>
    // JavaScript 函数用于发送查询请求并更新查询结果区域
    function searchMovies() {
        var name = document.getElementById('name').value;
        var type = document.getElementById('type').value;
        var uptime = document.getElementById('uptime').value;

        // 发送 AJAX 请求到后端
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/ilist?name=' + name + '&type=' + type + '&uptime=' + uptime, true);
        xhr.onload = function() {
            if (xhr.status == 200) {
                // 更新查询结果区域
                document.getElementById('searchResults').innerHTML = xhr.responseText;
            } else {
                // 处理请求错误
                console.error('请求出错');
            }
        };
        xhr.send();
    }
</script>
<!--更改新推送-->
<!--<div class="bigbox">-->
<!--    &lt;!&ndash; 所有图片 &ndash;&gt;-->
<!--    <div class="imgall">-->
<!--        <img src="../img/p1.png" alt="">-->
<!--        <img src="../img/p2.webp" alt="">-->
<!--        <img src="./img/p3.webp" alt="">-->
<!--        <img src="./img/p4.png" alt="">-->
<!--        <img src="./img/p5.png" alt="">-->

<!--    </div>-->
<!--    &lt;!&ndash; 点击箭头 &ndash;&gt;-->
<!--    <div onclick="left(this)" class="jiantouone">-->
<!--        <span class="iconfont icon-left"></span>-->
<!--    </div>-->
<!--    <div onclick="right(this)" class="jiantoutwo">-->
<!--        <span class="iconfont icon-zuoyoujiantou"></span>-->
<!--    </div>-->
<!--    &lt;!&ndash; 小圆点 &ndash;&gt;-->
<!--    <div class="yuan">-->
<!--        <div class="one"></div>-->
<!--        <div></div>-->
<!--        <div></div>-->
<!--        <div></div>-->
<!--        <div></div>-->
<!--        <div></div>-->
<!--    </div>-->
<!--</div>-->

<!--<script src="./work.js"></script>-->

<!--<script type="text/javascript" src="../../../js/wzq-script.js"></script>&lt;!&ndash;引入轮播图的js&ndash;&gt;-->
<script type="text/javascript" src="../../../js/addEL.js"></script><!--引入点击后才能查询的js-->




</body>
</html>